<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../../../yl/index.css" />
  <link rel="stylesheet" href="../../../style/index.css" />
  <title>事件信息</title>
  <style>
    .custom-tree-node {
      justify-content: flex-start;
    }

    #app {
      width: 100%;
      min-height: 100vh;
      position: relative;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <!-- <el-watermark 
  :content="watermarkText" 
  :font="watermarkFont"
  :repeat="watermarkRepeat"
  :x="watermarkX"
  :y="watermarkY"
  :width="watermarkWidth"
  :height="watermarkHeight"
  :alpha="watermarkAlpha"
  :z-index="watermarkZIndex"
    style="min-height: 100vh; display: flex; flex-direction: column;"
> -->
    <div class="title">
      <div>
        事件名称&nbsp;&nbsp;<el-input clearable v-model="page.value1" style="width: 200px; margin: 0 10px"
          placeholder="请输入内容"></el-input>
        投诉人电话&nbsp;&nbsp;<el-input  clearable v-model="page.value2" style="width: 200px; margin: 0 10px"
          placeholder="请输入内容"></el-input>
        
        村<el-cascader clearable class="borderless-input" v-model="cityValue1" filterable
          :props="{ emitPath: false,value:'ProvinceNumber',label:'Province',children:'children'}" placeholder="请选择村" :options="city1"
          style="width: 300px; margin: 0 10px"></el-cascader>
        
        
      </div>
      <div style="margin-top: 15px;">
      选择日期&nbsp;&nbsp;<el-date-picker clearable v-model="valueDatepick" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期"  style="width: 300px; margin: 0 10px">
        </el-date-picker>

        </el-form-item>
        <el-button icon="Search" style="margin: 0; margin-right: 10px" @click="check">查询</el-button>
        <el-button type="primary" icon="CirclePlus" style="margin: 0; margin-right: 10px" @click="complaintsAdd" plain
          round>添加</el-button>
        <el-button type="warning" icon="Download" style="margin: 0; margin-right: 10px" plain round
          @click="import_data">批量导入</el-button>
        <el-button type="success" icon="Upload" style="margin: 0; margin-right: 10px" plain round
          @click="Batchexport">批量导出</el-button>
        
        <el-button color="#626aef" plain round @click="handleOpenDialog">设置显示字段</el-button>

      </div>

    </div>
    <div class="body">
      <div class="left">
        <el-tree ref="tree" default-expand-all :expand-on-click-node="false" id="tree"
          :data-options="JSON.stringify({ 'TableName': 'complaints_categories', 'NodeCode': '','primary_key':'category_id' })"
          style="max-width: 600px" :data="treeData" @node-click="handleNodeClick" :props="{ label: 'category_name' }">
          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <el-icon v-if="node.level==1&&node.expanded">
                <Folder-Opened />
              </el-icon>
              <el-icon v-else>
                <Folder />
              </el-icon>
              <span>{{ node.label }}</span>
              <!-- <div>
                                <el-button v-if="node.level != 2" type="primary" link @click="personalAdds(data)">+</el-button>
                                <el-button type="primary" link @click="handleEdits(data)">编辑</el-button>
                                <el-button style="margin-left: 4px" type="danger" link @click="remove(node, data)">删除</el-button>
                            </div> -->
            </div>
          </template>
        </el-tree>
      </div>
      <div class="right">
        <!-- <el-button class="zdtype" @click="handleOpenDialog">设置显示字段</el-button> -->
        <el-table id="table" :data-options="JSON.stringify({ 'TableName': 'complaints','primary_key':'complaint_id'})"
          height="450" v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="Tabletdata"
          @selection-change="handleSelectionChange">
          <el-table-column min-width="180" v-for="column in columns" :key="column.COLUMN_NAME"
            :prop="column.COLUMN_NAME" :label="column.COLUMN_COMMENT">
            <template v-slot="{row}">
              <div
                v-if="row[column.COLUMN_NAME].includes('.png')||row[column.COLUMN_NAME].includes('.jpg')||row[column.COLUMN_NAME].includes('.jpeg')">
                <el-image style="width: 100px; height: 100px" :src="photo + row[column.COLUMN_NAME]"
                  fit="contain"></el-image>
              </div>
              <div v-else>{{row[column.COLUMN_NAME]}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="{row}">
              <el-button size="small" type="danger" @click="handleEdit(row)">
                编辑
              </el-button>
              <el-button size="small" type="danger" @click="handleDelete1(row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 1%" :current-page="page.PageNumber" :page-size="page.RowAmount"
          :page-sizes="[10, 100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="Total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <el-dialog v-model="showDialog" width="550" class="custom-dialog">
      <template #header>
        <div class="dialog-header">
          <span>设置显示字段</span>
        </div>
      </template>
      <div class="dialog-content">
        <el-checkbox v-model="isAllChecked" @change="handleAllChecked" class="full-width-checkbox">全选</el-checkbox>
        <div class="checkbox-columns">
          <el-checkbox-group v-model="checkedFields" style="width: 100%; display: flex; flex-wrap: wrap">
            <el-checkbox :disabled="field.COLUMN_KEY === 'PRI'" v-for="field in fields" :key="field" :value="field"
              style="width: 50%; height: 30px; margin-right: 0px">
              {{ field.COLUMN_COMMENT }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="saveFields" class="confirm-btn">保存</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" v-model="showDialogDelete" width="550" class="custom-dialog">
      <template #header>
        <div class="dialog-header">
          <span>删除询问</span>
        </div>
      </template>

      <div>
        <el-select v-model="deleteReason" placeholder="请选择">
          <el-option v-for="item in deleteReasoninfo" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!-- <el-select v-model.trim="deleteReason" placeholder="请选择删除原因">
                    <el-option v-for="item in deleteReasoninfo" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select> -->
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialogDelete = false" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="deleteConfirm" class="confirm-btn">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

  <script src="../../../utils/utils.js"></script>
  <script src="../../../utils/mixins.js"></script>
  <script src="../../../config/config.js"></script>
  <script src="../../../yl/vue.js"></script>
  <script src="../../../yl/index.js"></script>
  <script src="../../../yl/zh-cn.mjs"></script>
  <script src="../../../yl/index.iife.min.js"></script>
  <script src="../../../yl/jquery.min.js"></script>
  <script src="../../../utils/jquery.cookie.js"></script>
  <script src="../../../api/request.js"></script>
  <script src="../../../utils/xlsx.full.min.js"></script>
  <script src="js/index.js"></script>
</body>

</html>